<template>
  <a-row type="flex" justify="center">
    <a-col :span="16">
      <a-card class="card">
        <!-- 标题 -->
        <a-row type="flex" justify="center">
          <a-col :span="23">
            <a-tabs :default-active-key="0" @change="callback" style="margin-top: -0.9em">
              <a-tab-pane v-for="(tab,index) in tabArr" :key="index" :tab="tab.name">
                <a-row type="flex"
                       justify="space-between"
                       v-for="(cardArr,index) in showCards"
                       :key="index">
                  <a-col v-for="(card,index) in cardArr"
                         class="top-col"
                         :span="4"
                         :key="index">
                    <a-card class="service-card" @click.native="openPage(card.cardUrl)">
                      <a-row>
                        <div class="card-div">
                          <svg-icon :iconClass="card.svgName" className="card-svg"/>
                        </div>
                      </a-row>
                      <a-row>
                        <span class="card-msg">{{ card.msg }}</span>
                      </a-row>
                    </a-card>
                  </a-col>
                </a-row>
              </a-tab-pane>
            </a-tabs>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>


export default {
  name: "service",
  data() {
    return {
      tabArr: [
        {name: '便民服务'},
        {name: '公益服务'}
      ],
      showCards: [],
      firstCards: [
        [
          {svgName: 'second-hand', msg: '二手信息', cardUrl: 'https://www.baixing.com'},
          {svgName: 'travel', msg: '周边景点', cardUrl: 'http://www.mafengwo.cn'},
          {svgName: 'life-pay', msg: '生活缴费', cardUrl: 'https://jiaofei.alipay.com/jiaofei.htm'},
          {svgName: 'mail', msg: '快递查询', cardUrl: 'https://www.kuaidi100.com'},
          {svgName: 'violation', msg: '违章查询', cardUrl: 'https://sx.122.gov.cn'},
        ],
        [
          {svgName: 'life-service', msg: '生活服务', cardUrl: 'https://www.58.com'},
          {svgName: 'easy-help', msg: '便民查询', cardUrl: 'https://www.bmcx.com'},
          {svgName: 'search', msg: '检车服务', cardUrl: 'https://sx.122.gov.cn/'},
          {svgName: 'insurance', msg: '车险服务', cardUrl: 'https://www.4008000000.com/zaixiangoumai/chexian/chexian.shtml'},
          {svgName: 'more', msg: '更多服务', cardUrl: `/trainingServices.html`}
        ]
      ],
      secondCards: [
        [
          {svgName: 'quotes', msg: '价格行情', cardUrl: 'http://price.wiimedia.cn:8001/price'},
          {svgName: 'political', msg: '电子政务', cardUrl: 'http://www.sxzwfw.gov.cn/icity/public/index'},
          {svgName: 'pests', msg: '虫害诊断', cardUrl: 'https://www.nongyao001.com/insects'},
          {svgName: 'exam', msg: '高考查询', cardUrl: 'https://gkcx.eol.cn'},
          {svgName: 'register', msg: '预约挂号', cardUrl: 'http://www.sxyygh.com/index.asp'},
        ]
      ],
      isFirstCard: true
    }
  },
  methods: {
    openPage(cardUrl) {
      window.open(cardUrl)
    },
    callback(index) {
      index === 0 ? this.showCards = this.firstCards : this.showCards = this.secondCards
    },
    locationTo(url) {
      // window.location = localStorage.getItem('contextPrefix') + url
    }
  },
  mounted() {
    this.showCards = this.firstCards
  }
}
</script>

<style lang="scss" scoped>
@import "/assets/styles/base";

.top-col {
  text-align: center;
  margin: 1em 3px 2px 3px;
}

.service-card {
  //width: 12em;
  border-radius: 0.8em;
  box-shadow: 1px 1px 2px 1px rgba(240, 240, 240, 0.9);
  letter-spacing: 0.1em;
  transition: box-shadow 500ms;

  &:hover {
    border-radius: 0.8em;
    box-shadow: 0 0 3px 4px rgba(240, 240, 240, 1);
    cursor: pointer;
    transition: fill 500ms;

    .card-div {
      fill: #008489;
    }
  }
}

.card-msg {
  font-size: 1.4em;
  color: black;
}

.card-svg {
  width: 5em;
  height: 5em;
  font-weight: 600;
}

.card-div {
  fill: #1FAC72;
  transition: fill 500ms;
}
</style>
